<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width" initial-scale="1.0">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script type="text/javascript" src="../../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.js"></script>
    <script type="text/javascript" src="../../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../../js/axios-0.21.0.js"></script>
    <style type="text/css">
        .navbar-nav li.divider:after {
            content: '';
            position: absolute;
            width: 1px;
            height: 14px;
            background-color: #a4a4a4;
            top: 18px;
            right: 0;
        }

        .carousel-indicators li {
            background-color: rgba(167, 167, 167, 0.5);
        }
    </style>
</head>
<body>
<div id="app">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4>用户管理</h4>
        </div>
        <a href="../content.html" class="btn btn-primary">管理中心</a>
        <div class="panel-body">
            <table class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>id</th>
                    <th>昵称</th>
                    <th>角色</th>
                    <th>邮箱</th>
                    <th>手机</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="user in page.records">
                    <td>{{user.userId}}</td>
                    <td>{{user.userName}}</td>
                    <td>{{user.role}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.phone}}</td>
                    <td>{{user.createTime}}</td>
                    <td>
                        <a href="" class="btn btn-warning" @click.prevent="update(user.userId)">修改</a>
                        <a href="" class="btn btn-warning" @click.prevent="deleteUser(user.userId)">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="text-center">
                <ul class="pagination">
                    <a class="prev" href="" @click.prevent="getUsers(page.current-1)">&lt;&lt;</a>
                    <a class="num" href="">{{page.current}}</a>
                    <a class="next" href="" @click.prevent="getUsers(page.current+1)">&gt;&gt;</a>
                </ul>
            </div>
        </div>
        <div class="panel-footer"></div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            pageNum: 1,
            pageSize: 10,
            page: {},
        },
        created() {
            this.isLogin();
            this.getUsers();
        },
        methods: {
            isLogin() {
                axios.get('/user').then(res => {
                    if (res.data.data === null) {
                        alert("请先登录！");
                        location.href = '/login.html';
                    }
                })
            },
            getUsers(page) {
                if (page) {
                    this.pageNum = page
                }
                if (page < 1) {
                    alert("已经是第一页了")
                    return
                }
                if (page > this.page.pages) {
                    alert("已经是最后一页了")
                    return
                }
                axios.get(`/user/get/${this.pageNum}/${this.pageSize}`)
                    .then(resp => {
                        console.log(resp);
                        this.page = resp.data.message;
                    }).catch(error => {
                    console.log(error);
                });
            },
            deleteUser(id) {
                axios.delete(`/user/delete/${id}`)
                    .then(resp => {
                        console.log(resp);
                        this.getUsers();
                    }).catch(error => {
                    console.log(error);
                });
            },
            update(id) {
                window.location.href = `update.html?id=${id}`;
            }
        }
    })
</script>
</body>
</html>